<script setup>
import { ref, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 标签页列表
const tabs = ref([])
const activeTab = ref(null)

// 添加标签页
const addTab = (tab) => {
  const isExist = tabs.value.some(item => item.path === tab.path)
  if (!isExist) {
    if (tab.isHome) {
      // 如果是首页标签，添加到数组开头
      tabs.value.unshift(tab)
    } else {
      // 如果不是首页，先找到首页标签的位置
      const homeIndex = tabs.value.findIndex(t => t.path === '/')
      if (homeIndex !== -1) {
        // 在首页后面插入新标签
        tabs.value.splice(homeIndex + 1, 0, tab)
      } else {
        // 如果没有首页标签（不应该发生），直接添加到末尾
        tabs.value.push(tab)
      }
    }
  }
  activeTab.value = tab.path
}

// 关闭标签页
const closeTab = (targetPath) => {
  const tabIndex = tabs.value.findIndex(item => item.path === targetPath)
  if (tabIndex === -1) return
  
  // 如果关闭的是当前激活的标签页，需要切换到其他标签页
  if (targetPath === activeTab.value) {
    const nextTab = tabs.value[tabIndex + 1] || tabs.value[tabIndex - 1]
    if (nextTab) {
      router.push(nextTab.path)
    }
  }
  
  tabs.value.splice(tabIndex, 1)

  // 如果没有其他标签页了，跳转到首页
  if (tabs.value.length === 0) {
    router.push('/')
  }
}

// 切换标签页
const switchTab = (tab) => {
  router.push(tab.path)
  activeTab.value = tab.path
}

// 关闭所有标签页
const closeAllTabs = () => {
  // 过滤出非首页的标签
  const tabsToClose = tabs.value.filter(tab => !tab.isHome)
  // 删除所有非首页标签
  tabs.value = tabs.value.filter(tab => tab.isHome)
  // 跳转到首页
  router.push('/')
  activeTab.value = '/'
}

// 初始化首页标签
onMounted(() => {
  // 添加首页标签
  addTab({
    title: '首页',
    path: '/',
    name: 'home',
    isHome: true
  })
})

// 监听路由变化
watch(() => route.path, (newPath) => {
  const title = newPath === '/' ? '首页' : (route.meta.title || '未命名')
  addTab({
    title: title,
    path: newPath,
    name: route.name,
    isHome: newPath === '/' // 确保路径为 / 时设置 isHome 为 true
  })
}, { immediate: true })
</script>

<template>
  <div class="tabs-view">
    <div class="content-card">
      <div class="tabs-list">
        <div class="tabs-container">
          <el-tag
            v-for="tab in tabs"
            :key="tab.path"
            :type="activeTab === tab.path ? '' : 'info'"
            :effect="activeTab === tab.path ? 'light' : 'plain'"
            class="tab-item"
            :closable="!tab.isHome"
            :disable-transitions="false"
            @click="switchTab(tab)"
            @close.stop="closeTab(tab.path)"
          >
            {{ tab.title }}
          </el-tag>
        </div>
        <div class="tabs-actions">
          <el-button
            v-if="tabs.length > 1"
            size="small"
            type="primary"
            link
            @click="closeAllTabs"
          >
            关闭全部
          </el-button>
        </div>
      </div>
      <div class="tab-content">
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </div>
    </div>
  </div>
</template>

<style scoped>
.tabs-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: -16px;
}

.content-card {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tabs-list {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  gap: 8px;
  background-color: #fff;
  border-bottom: 1px solid var(--el-border-color-light);
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 4px 4px 0 0;
}

.tabs-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
}

.tabs-actions {
  flex-shrink: 0;
  margin-left: 8px;
  border-left: 1px solid var(--el-border-color-light);
  padding-left: 8px;
}

.tabs-container::-webkit-scrollbar {
  height: 6px;
}

.tabs-container::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

.tab-item {
  cursor: pointer;
  user-select: none;
  height: 32px;
  line-height: 30px;
  padding: 0 12px;
}

.tab-item :deep(.el-tag__close) {
  right: -4px;
}

.tab-content {
  flex: 1;
  overflow: auto;
  padding: 16px 20px;
}

:deep(.el-card) {
  box-shadow: none !important;
  border: none !important;
}

:deep(.el-table) {
  --el-table-border-color: var(--el-border-color-lighter);
}
</style> 